<template>
  <a-table
    :dataSource="userList"
    :columns="columns"
    :rowkey="rowkey"
    :loading="loading"
    :pagination="false"
  />
</template>

<script setup lang="ts">
import { ApiResponse, User } from "../../model/two/User";
import { useRequest } from "vue-request";
import { ref } from "vue";
import axios from "../../api/request";

const { data: userList, loading } = useRequest<User[]>(() =>
  axios.get<ApiResponse>("/api/users").then((res) => res.data.data)
);

// const userList = computed(()=>{
//     debugger
//    return Response.value?.data || []
// })

const columns = ref([
  { title: "编号", dataIndex: "id" },
  { title: "姓名", dataIndex: "name" },
  {
    title: "邮箱",
    dataIndex: "email",
    customRender: ({ text }) => {
      return text ?? "-"; // 显示 null 时渲染为 "-"
    },
  },
]);

function rowkey(r: User) {
  return r.id;
}
</script>